<template>
  <div class="basic-info">
    <h4>基本信息</h4>
    <el-form :model="formData" label-width="140px">
      <!-- 第一行 -->
      <el-row class="form-row">
        <el-col :span="8">
          <el-form-item label="姓名" style="margin-bottom: 0;">
            <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄" style="margin-bottom: 0;">
            <el-input v-model.number="formData.age" placeholder="请输入年龄" type="number" min="0"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <!-- 添加性别 -->
          <el-form-item label="性别" style="margin-bottom: 0;">
            <el-radio-group v-model="formData.gender">
              <el-radio label="male">男</el-radio>
              <el-radio label="female">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row class="form-row">
        <el-col :span="12">
          <el-form-item label="邮箱" style="margin-bottom: 0;">
            <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" style="margin-bottom: 0;">
            <el-input v-model="formData.phone" placeholder="请输入联系电话"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row class="form-row">
        <el-col :span="8">
          <el-form-item label="民族" style="margin-bottom: 0;">
            <el-input v-model="formData.nation" placeholder="请输入民族"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="政治面貌" style="margin-bottom: 0;">
            <el-input v-model="formData.politicalStatus" placeholder="请输入政治面貌"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="籍贯" style="margin-bottom: 0;">
            <el-input v-model="formData.nativePlace" placeholder="请输入籍贯"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        gender: 'male',
        age: null,
        email: '',
        phone: '',
        nation: '',
        politicalStatus: '',
        nativePlace: ''
      }
    };
  }
};
</script>

<style scoped>
.basic-info {
  margin-bottom: 15px;
}
.el-input {
  width: 100%;
}
.form-row {
  margin-bottom: 15px; /* 设置行间距 */
}
</style>










